<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 电站审批
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="query.approvalType"
                   placeholder="未审批"
                   class="handle-select mr10"
                   @change="handleSearch">
          <el-option key="1"
                     label="未审批"
                     value="0"></el-option>
          <el-option key="2"
                     label="已通过审批"
                     value="1"></el-option>
          <el-option key="3"
                     label="未通过审批"
                     value="2"></el-option>
        </el-select>
      </div>
      <el-table :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header">
        <el-table-column label="序号"
                         width="55"
                         align="center">
          <template slot-scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="name"
                         label="电站名称"></el-table-column>

        <el-table-column prop="place"
                         label="电站地址"></el-table-column>
        <el-table-column label="电站图片"
                         width="180">
          <template slot-scope="scope">
            <img :src="scope.row.imgsrc"
                 width="40"
                 height="80"
                 class="table" />
          </template>
        </el-table-column>
        <el-table-column prop="parkingFee"
                         label="停车费用"></el-table-column>
        <el-table-column prop="businessHours"
                         label="营业时间"></el-table-column>
        <!-- <el-table-column label="提出日期">
          <template slot-scope="scope">
            {{formatDate(tableData[scope.$index].createTime)}}
          </template>
        </el-table-column>-->
        <el-table-column label="操作"
                         v-if="getStatus()"
                         width="180"
                         align="center">
          <template slot-scope="scope">
            <el-button type="text"
                       icon="el-icon-edit"
                       @click="handleAgree(tableData[scope.$index].id)">同意</el-button>
            <el-button type="text"
                       icon="el-icon-delete"
                       class="red"
                       @click="handleRefuse(tableData[scope.$index].id)">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background
                       layout="total, prev, pager, next"
                       :current-page="query.pageNum"
                       :page-size="query.pageSize"
                       :total="pageTotal"
                       @current-change="handlePageChange"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getApprovalMsg, agreeApproval, refuseApproval } from '../../api/powerStationApproval';
export default {
  name: 'basetable',
  data () {
    return {
      query: {
        approvalType: "0",
        pageNum: 1,
        pageSize: 5
      },
      agreeParam: {
        id: ''
      },
      refuseParam: {
        id: ''
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1
    };
  },
  created () {
    this.getData();
    this.webSocket();
  },
  methods: {
    getStatus () {
      if (this.query.approvalType == '0') {
        return true;
      } else {
        return false;
      }
    },

    formatDate (time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return year + '年' + month + '月' + day + '日';
    },

    getData () {
      getApprovalMsg(this.query).then(res => {
        console.log(res);
        this.tableData = res.data.list
        this.pageTotal = res.data.total
      })
    },
    // 触发搜索按钮
    handleSearch () {
      this.$set(this.query, 'pageNum', 1);
      getApprovalMsg(this.query).then(res => {
        console.log(res);
        this.tableData = res.data.list
        this.pageTotal = res.data.total
      })
    },
    // 拒绝操作
    handleRefuse (id) {
      // 二次拒绝确认
      this.$confirm('确定要拒绝吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.refuseParam.id = id;
          refuseApproval(this.refuseParam).then(res => {
            if (res.code == 200) {
              this.$message.success('拒绝成功');
              this.getData(this.tableData);
            } else {
              this.$message.error('拒绝失败');
            }
          })
        })
        .catch(() => { });
    },
    // 同意操作
    handleAgree (id) {
      // 二次同意确认
      this.$confirm('确定要同意吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.agreeParam.id = id;
          agreeApproval(this.agreeParam).then(res => {
            if (res.code == 200) {
              this.$message.success('审批通过');
              this.getData(this.tableData);
            } else {
              this.$message.error('审批失败');
            }
          })
        })
        .catch(() => { });
    },
    // 分页导航
    handlePageChange (val) {
      this.$set(this.query, 'pageNum', val);
      this.getData()
    }
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
